<template>
  <el-container>
    <el-header>
      <el-input
          v-model="searchKeyword"
          placeholder="搜索目的地或充电站"
          @keyup.enter="searchStations"
          clearable
      />
    </el-header>
    <el-main>
      <el-row gutter="20">
        <el-col :span="24">
          <el-card
              v-for="station in stationList"
              :key="station.id"
              shadow="always"
              class="station-card"
              @click="viewStationDetails(station.id)"
          >
            <div slot="header" class="clearfix">
              <span>{{ station.name }}</span>
              <el-tag v-if="station.isPopular" type="success">热门</el-tag>
            </div>
            <div>
              <p>价格: {{ station.price }} 元/度</p>
              <p>距离: {{ station.distance }} km</p>
              <el-button type="primary" @click.stop="navigateToStation(station.id)">导航</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const stationList = ref([]);
const searchKeyword = ref('');

const fetchStationList = async () => {
  try {
    const response = await axios.get('/api/stations');
    stationList.value = response.data;
  } catch (error) {
    console.error('Error fetching stations:', error);
  }
};

const searchStations = () => {
  // 可实现搜索过滤逻辑
  console.log('搜索:', searchKeyword.value);
};

const viewStationDetails = (stationId) => {
  // 跳转到详情页
  window.location.href = `/station/${stationId}`;
};

const navigateToStation = (stationId) => {
  // 调用地图导航功能
  console.log('导航到:', stationId);
};

onMounted(fetchStationList);
</script>
